;(function(){
    window.SportDetail = {
        template: `
        <div class="jumbotron">
            <h2>{{sportDetail.title}}</h2>
            <p>{{sportDetail.content}}</p>
        </div>
        </div>  
        `,
        data() {
            return {
                id: null,
                sportDetail: {}
            }
        },
        methods: {
            getSportById(){
                this.id = this.$route.params.id - 0
                axios.get("http://localhost:8080/db/sport.json").then(response =>{
                    const sportArr = response.data
                    this.sportDetail = sportArr.find(detail => {
                        return detail.id === this.id
                    })
                }).catch(error =>{
                    alert(error.message)
                })
            }
        },
        created() {
            this.getSportById()
        },
        watch: {
            '$route': function(){
                this.getSportById()
            }
        }
    }
})()